<template>
  <div class="pay">
    <Header title="在线支付" />
    <div class="pay-wrap">
      <div class="pay-time">
        <span>支付剩余时间</span>
        <h3>{{countTime}}</h3>
      </div>
      <div class="pay-name">
        <ul>
          <li>
            <span class="name">{{foodName.shopInfo.name}}</span>
            <div class="pay-fee">￥{{totalPrice}}</div>
          </li>
        </ul>
      </div>
      <div class="pay-online">
        <span class="pay-header">在线支付</span>
        <ul class="pay-way">
          <li>
            <div class="icon">
              <img src="../../assets/wechart.jpg" alt="">
              <span>微信</span>
            </div>
            <i class="fa fa-check-circle"></i>
          </li>
        </ul>
      </div>
      <button class="btn-submit" :disabled="timeout">确认支付</button>
    </div>
  </div>
</template>

<script>
import Header from '@/components/Header/Header'

export default {
  name: 'MyPay',
  components: {
    Header
  },
  computed: {
    foodName() {
      return this.$store.getters.foodSelect
    },
    totalPrice() {
      return this.$store.getters.totalPrice
    }
  },
  data() {
    return {
      countTime: '00:15:00',
      timer: null,
      timeout: false
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.countTimeDown()
    })
  },
  methods: {
    countTimeDown() {
      let minute = 14
      let second = 59

      this.timer = setInterval(() => {
        second--
        if (second === '00') {
          second = 59
          minute--
        }
        if (second === '00' && minute === '00') {
          this.countTime = '订单已超时'
          clearInterval(this.timer)
          this.timeout = true
          return
        }
        second = second < 10 ? '0' + second : second
        minute = minute < 10 ? '0' + minute : minute
        this.countTime = '00:' + minute + ':' + second
      }, 1000)
    }
  }
}
</script>

<style lang="less" scoped>
.pay {
  width: 100%;
  height: 100%;
  .pay-wrap {
    background-color: #eee;
    .pay-time {
      display: flex;
      flex-direction: column;
      padding: 30px 0;
      text-align: center;
      color: #333;
      box-sizing: border-box;
      border-bottom: 1px solid #ccc;
      background-color: #fff;
      h3 {
        margin: 0;
        font-size: 28px;
        margin-top: 10px;
      }
    }
    .pay-name {
      background-color: #fff;
      ul {
        li {
          display: flex;
          justify-content: space-between;
          padding: 10px;
          .name {
            width: 210px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .pay-fee {
            color: orange;
          }
        }
      }
    }
    .pay-online {
      margin-top: 20px;
      .pay-header {
        display: inline-block;
        padding: 10px 0;
      }
      .pay-way {
        background-color: #fff;
        li {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20px 10px;
          .icon {
            display: flex;
            align-items: center;
            img {
              width: 40px;
              height: 40px;
            }
          }
          .fa-check-circle {
            color: green;
            font-size: 24px;
          }
        }
      }
    }
    .btn-submit {
      width: 100%;
      padding: 10px 0px;
      background-color: #4cd964;
      border: none;
      outline: none;
      color: #fff;
      margin-top: 20px;
      box-sizing: border-box;
      border-radius: 5px;
      [disabled] {
        background-color: #bbb !important;
      }
    }
  }
}
</style>
